<template>
    <el-dialog :title="title" v-model="open" width="71%" append-to-body style="margin-top: 9px!important;">
        <el-form ref="meetingInfoRef" :model="form" :rules="rules" label-width="109px">
            <el-row>
            <el-col :span="24">
                <el-form-item label="会议名称" prop="title">
                <el-input v-model="form.title" :disabled="true"/>
                </el-form-item>
            </el-col>
            <el-col :span="24" prop="record">
                <el-form-item label="会议记录">
                  <editor v-model="form.record" :height="499"/>
                </el-form-item>
            </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { getMeetingInfo, updateMeetingInfo } from "@/api/partybuilding/MeetingInfo";
const { proxy } = getCurrentInstance();
const open = ref(false);
const title = ref("");

const data = reactive({
    form: {
        id: null,
        typeName: null,
        status: null,
        title: null,
        startTime: null,
        durtion: null,
        deptId: null,
        deptName: null,
        typeCode: null,
        meetingTopic: null,
        meetingWay: null,
        detailWay: null,
        signWay: null,
        meetingAddr: null,
        detailAddr: null,
        users: null,
        attendance: null,
        content: null,
        fileUrl: null,
        createrId: null,
        createTime: null
    },
    rules: {
      record: [
        { required: true, message: "会议记录不能为空", trigger: "blur" }
      ]
    }
});
  
const { form, rules } = toRefs(data);

const show = (id) => {
    handleUpdate(id);
    open.value = true;
};

defineExpose({
    show
});

/** 修改按钮操作 */
function handleUpdate(id) {
    reset();
    getMeetingInfo(id).then(response => {
      form.value = response.data;
      form.value.record = form.value.record? form.value.record : '<p></p>';
      open.value = true;
      title.value = "修改会议信息";
    });
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["meetingInfoRef"].validate(valid => {
        if (valid) {
            updateMeetingInfo(form.value).then(response => {
                proxy.$modal.msgSuccess("提交成功");
                open.value = false;
            });
        }
    });
}

// 表单重置
function reset() {
    form.value = {
        id: null,
        typeName: null,
        status: null,
        title: null,
        startTime: null,
        durtion: null,
        deptId: null,
        deptName: null,
        typeCode: null,
        meetingTopic: null,
        meetingWay: null,
        detailWay: null,
        signWay: null,
        meetingAddr: null,
        detailAddr: null,
        users: null,
        attendance: null,
        content: null,
        fileUrl: null,
        createrId: null,
        createTime: null
    };
    proxy.resetForm("meetingInfoRef");
}


// 取消按钮
function cancel() {
    open.value = false;
    reset();
}
</script>
<style lang="scss" scoped>
.typeCodeStyle {
    position: relative;
}
.typeCodeStyle::before {
  content: "*";
  color: #F56C6C;
  position: absolute;
  left: 31px;
  top: 9px;
}
.personDiv {
  margin: 5px;
}
.singlePersonDiv {
  position: relative;
  display: block;
  width: 64px;
  height: 66px;
  float: left;
  margin-top: 10px;
  margin-bottom: 15px;
  margin-right: 10px;
  cursor: pointer;
  .closeDiv {
      position: absolute;
      top: -11px;
      right: 7px;
      font-size: 16px;
      cursor: pointer;
  }
  .circleAndText {
      width: 44px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid #ffe3e3;
      color: #333;
      font-size: 14px;
      background-color: rgba(255, 77, 79, .06);
  }
  .bottomText {
      font-size: 14px;
      color: #595959;
      margin-top: -1px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
}
</style>